
Ext.define('MyApp.view.EditAppointment', {
    extend: 'Ext.Panel',
	xtype: 'editappointment',
	//id:    'editappointment',
	requires: ['Ext.ux.DateTimePicker'
	],
    config: {
        fullscreen: true,
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Appointments',
                items: [
                    {
                        xtype: 'button',
                        ui: 'back',
                        text: 'Back',
						itemId: 'back'
                    },
                    {
                        xtype: 'button',
                        align: 'right',
                        ui: 'decline',
                        iconAlign: 'right',
                        text: 'Delete',
						itemId: 'delete'
                    }
                ]
            },
            {
                xtype: 'formpanel',
				//id: 'editAppointmentForm',
				itemId: 'editAppointmentForm',
                height: '100%',
                width: '100%',
                scrollable: true,
				url: 'http://appt.elasticbeanstalk.com/appointment.php',
				standardSubmit: true,
				padding:2,
                items: [
                    
                    {
						xtype: 'fieldset',
						padding: 0,
						items: [
							{
								xtype: 'textfield',
								label: 'First',
								itemId: 'firstname',
								name: 'firstname'
							},
							{
								xtype: 'textfield',
								label: 'Last',
								itemId: 'lastname',
								name: 'lastname'
							},
							{
								xtype: 'numberfield',
								label: 'Phone',
								itemId: 'mobile',
								name: 'mobile'
							},
							{
								xtype: 'emailfield',
								label: 'Email',
								placeHolder: 'email@example.com',
								itemId: 'email',
								name: 'email'
							},
							{
								xtype: 'datepickerfield',
								label: 'Date',
								placeHolder: 'mm/dd/yyyy',
								itemId: 'date',
								name: 'date'
							},
							{
								xtype: 'datetimepickerfield',
								itemId: 'starttime',
								name : 'starttime',
								label: 'Start',
								dateTimeFormat: "g:i A",
								picker: {
									yearFrom: 2013,
									minuteInterval : 5,
									ampm : true,
									slotOrder: ['hour','minute','ampm']
								}
							},
							{
								xtype: 'datetimepickerfield',
								itemId: 'endtime',
								name : 'endtime',
								label: 'End',
								dateTimeFormat: "g:i A",
								picker: {
									yearFrom: 2013,
									minuteInterval : 5,
									ampm : true,
									slotOrder: ['hour','minute','ampm']
								}
							},
							{
								xtype: 'textareafield',
								label: 'Notes',
								itemId: 'notes',
								name: 'notes'
							},
							{
								xtype: 'textfield',
								label: 'Location',
								autoCapitalize: true,
								itemId: 'mapaddress',
								name: 'mapaddress'
							},
							{
								xtype: 'checkboxfield',
								label: 'Map',
								itemId: 'maplink',
								name: 'maplink'
							},
							{
								xtype: 'checkboxfield',
								label: 'Calendar',
								itemId: 'calendar',
								name: 'calendar'
							},
							{
								xtype: 'hiddenfield',
								name: 'userId',
								value: 1,
								itemId: 'userId'
							},
							{
								xtype: 'hiddenfield',
								name: 'sentby',
								value: '',
								itemId: 'sentby'
							},
							{
								xtype: 'hiddenfield',
								name: 'appointmentid',
								value: '',
								itemId: 'appointmentid'
							}
						]
					}
					]
			},
            {
                xtype: 'container',
                docked: 'bottom',
                layout: {
                    type: 'hbox'
                },
                items: [
                    {
                        xtype: 'button',
                        flex: 1,
                        margin: 2,
                        ui: 'action',
                        text: 'Save',
						itemId: 'save'
                    },
                    {
                        xtype: 'button',
                        flex: 1,
                        margin: 2,
                        ui: 'action',
                        text: 'Email',
						handler: function(){
						console.log(Ext.getClassName(Ext.Viewport.getActiveItem()));
						}
                    },
                    {
                        xtype: 'button',
                        flex: 1,
                        margin: 2,
                        ui: 'action',
                        text: 'SMS'
                    }
                ]
            }
        ]
    }

});